import React, { useCallback, useState } from 'react'

export default function App() {
    const [num, setNum] = useState(1);
    const [age, setAge] = useState(100);
       // useCallback第一个参数是函数,第二个参数是一个数组
    // 如果将第二个参数设置为[],那么函数中的数据不会受到外部的影响。
    // 如果将第二个参数设置为[num],当num发生改变时，函数会去除记忆。
    // 如果省略第二个参数，相当于没有使用userCallback
    const changeNum = useCallback(() => {
        if ((num + 1) > 5) return;
        setNum(num + 1);
    }, [num])
    //省略第二个参数此方法不起作用    ,[] 为空只会执行一次,[num]监视num改变,进行重新渲染数据
    const changeAge = useCallback(() => {
        if ((age + 2) > 110) return;
        setAge(age+2)
    },[age])
  return (
      <div>
          <button onClick={changeNum}>num:{num}</button>
          <button onClick={changeAge}>age:{age}</button>
    </div>
  )
}
